<template>
    <div class="table">
      <h1 class="title">查询电影资源</h1>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称" >
          <el-input v-model="formInline.name" placeholder="输入名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" >
          <el-select v-model="formInline.resourceFlag" placeholder="类型" clearable>
            <el-option label="电影" value="01"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类地区">
          <el-select v-model="formInline.areaId" placeholder="请选择地区" clearable>
                  <el-option  v-for="item in areaId" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类类型">
            <el-select v-model="formInline.typeId" placeholder="请选择类型" clearable>
                    <el-option  v-for="item in typeId" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="VIP" >
          <el-select v-model="formInline.vipFlag" placeholder="请选择" clearable>
            <el-option label="是" value="01"></el-option>
            <el-option label="否" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态" > 
          <el-select v-model="formInline.shelfState" placeholder="请选择" clearable>
            <el-option label="上架" value="01"></el-option>
            <el-option label="下架" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-waves icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-table
        v-loading="tableloading"
          :data="tableData"
          border
          :row-class-name="tableRowClassName"
          style="width: 100%">
          <el-table-column
           type="index"
            width="55">
          </el-table-column>
          <el-table-column
            sortable
            align="center"
            prop="createTime"
            label="日期"
            width="190">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
            <el-table-column
              prop="title"
              align="center"
              label="名称"
              min-width="260">
            </el-table-column>
              <el-table-column
                prop="subtitle"
                align="center"
                label="副标题"
                width="120">
              </el-table-column>
              <el-table-column
                prop="hotDegree"
                align="center"
                label="热度"
                width="120">
              </el-table-column>
              <el-table-column
                prop="resourceFlag"
                align="center"
                label="资源类型"
                width="120">
                <template slot-scope="scope">{{getsourceTYpe(scope.row.resourceFlag)}}</template>
              </el-table-column>
              <el-table-column
                prop="vipFlag"
                align="center"
                label="VIP"
                width="120">
                <template slot-scope="scope">{{getvipFlagTYpe(scope.row.vipFlag)}}</template>
              </el-table-column>
            <el-table-column
                prop="shelfState"
                align="center"
                label="上架状态"
                width="120">
                <template slot-scope="scope">{{getshelfStateTYpe(scope.row.shelfState)}}</template>
              </el-table-column>
            <el-table-column
                prop="areaId"
                align="center"
                label="分类地区"
                width="120">
                <template slot-scope="scope">{{getAreaTYpe(scope.row.areaId)}}</template>
              </el-table-column>
            <el-table-column
                prop="typeId"
                align="center"
                label="分类类型"
                width="120">
                <template slot-scope="scope">{{getTypeTYpe(scope.row.typeId)}}</template>
              </el-table-column>
              <el-table-column
                prop="isRecommend"
                align="center"
                label="是否推荐"
                width="120">
                <template slot-scope="scope">{{getisRecommendTYpe(scope.row.isRecommend)}}</template>
              </el-table-column>
              <el-table-column
                  prop="keywords"
                  align="center"
                  label="关键字"
                  width="120"
                  >
                  <template slot-scope="scope">
                    <el-tag>{{scope.row.keywords}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="190" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                    icon="el-icon-edit"
                    style="background: #399bff;
                    border-color: #399bff;
                    color: #fff;"
                      size="mini"
                      v-waves
                      @click="edite(scope)"
                      >编辑</el-button>
                    <el-button
                    icon="el-icon-delete"
                      size="mini"
                      type="danger"
                      @click="deleteDetail(scope)"
                      >删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                  background
                  @size-change="pageSizeChange"
                  @current-change="pageIndexChange"
                  :current-page="pageIndex"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="dataTotal"
              ></el-pagination>
            </div>
            <el-dialog :visible.sync="dialogVisible" title="编辑资源信息">
              <el-row :gutter="24">
                <el-col :span="12">
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        drag
                        :action="actionURL"
                        name = "file"
                        :on-progress="onprogress"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-error="handleAvatarError"
                        :auto-upload="false"
                        :on-exceed="handleexceed"
                        :limit="limitPoster">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb<br>
                            <el-button type="primary" v-waves style="margin: 5px 0;" @click="doImgUpload">重新上传</el-button>
                        </div>
                    </el-upload>
                </el-col>
                <el-col :span="12">
                    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="标题" prop="resourceId" hidden>
                            <el-input v-model="ruleForm.resourceId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="封面" prop="poster">
                            <el-input v-model="ruleForm.poster" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="资源类型" prop="resourceFlag">
                            <el-select v-model="ruleForm.resourceFlag" placeholder="请选择类型" clearable>
                            <el-option label="电影" value="01"></el-option>
                            <el-option label="电视剧" value="02"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分类地区" prop="areaId">
                            <el-select v-model="ruleForm.areaId" placeholder="请选择地区" clearable>
                                    <el-option
                                    v-for="item in areaId"
                                    :key="item.areaId"
                                    :label="item.areaName"
                                    :value="item.areaId">
                                    </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分类类型" prop="typeId">
                            <el-select v-model="ruleForm.typeId" placeholder="请选择类型" clearable>
                                <el-option
                                v-for="item in typeId"
                                :key="item.typeId"
                                :label="item.typeName"
                                :value="item.typeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="ruleForm.title" placeholder="请输入名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="副标题" prop="subtitle">
                            <el-input v-model="ruleForm.subtitle" placeholder="请输入名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="上架状态" prop="shelfState">
                            <el-select v-model="ruleForm.shelfState" placeholder="请选择状态" clearable>
                                <el-option label="上架" value="01"></el-option>
                                <el-option label="下架" value="02"></el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item label="是否VIP" prop="vipFlag">
                            <el-radio-group v-model="ruleForm.vipFlag" size="medium">
                                <el-radio border label="01">是</el-radio>
                                <el-radio border label="02">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否推荐" prop="isRecommend">
                            <el-radio-group v-model="ruleForm.isRecommend" size="medium">
                                <el-radio border label="01">推荐</el-radio>
                                <el-radio border label="02">不推荐</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="关键字" prop="keywords">
                            <el-input type="textarea" v-model="ruleForm.keywords" ></el-input>
                        </el-form-item>
                        <el-form-item label="热度" prop="hotDegree">
                            <el-input type="number" v-model="ruleForm.hotDegree" clearable></el-input>
                        </el-form-item> 
                        <el-form-item label="详情介绍" prop="introduce">
                            <el-input type="textarea" v-model="ruleForm.introduce" ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-waves :loading="submitLoad" @click="submitForm(ruleForm)">立即提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                  </el-col>
              </el-row>
          </el-dialog>
      </el-row> 
    </div>
</template>

<script>
import waves from '@/directive/waves/index.js'
import { uploadBanner,getResourceBaseData ,getResourceAreas,getResourceTypes,getResourceBaseDetail,deleteResourceBase,resetResourceBase} from "@/api/index.js"
import Enum from "@/common/Enum.js"
export default {
    directives: {
        waves
    },
    data() {
        return {
          submitLoad : false,
          dialogVisible : false,
          tableloading : false,
          pageIndex: this.$store.getters.getUserListIndex1,
          actionURL : uploadBanner,
          limitPoster : 1,
          pageSize: 10,
          dataTotal: 0,
          formInline: {
            name: '',
            region: '',
            resourceFlag: '01',
            areaId: '',
            typeId: '',
            vipFlag: '',
            shelfState: '',
          },
          tableData: [],
          ruleForm: {
              title : '',
              subtitle : '',
              introduce : '',
              resourceFlag : '',
              vipFlag : '',
              shelfState : '',
              keywords : '',
              areaId : '',
              typeId : '',
              isRecommend : '',
              hotDegree : '',
              poster : ''
          },
          areaId : '',
          typeId : '',
        }
    },
    methods: {
      getsourceTYpe(type){
        return Enum.getsourceTYpe(type);
      },
      getvipFlagTYpe(type){
        return Enum.getvipFlagTYpe(type);
      },
      getshelfStateTYpe(type){
        return Enum.getshelfStateTYpe(type);
      },
      getisRecommendTYpe(type){
        return Enum.getisRecommendTYpe(type);
      },
      getAreaTYpe(type){
          let re = '';
          this.areaId.forEach(function (obj) {
            if (obj.areaId == type) {
              re = obj.areaName;
              return
            }
          });
          return re
      },
      getTypeTYpe(type){
        let re = '';
          this.typeId.forEach(function (obj) {
            if (obj.typeId == type) {
              re = obj.typeName;
              return
            }
          });
          return re
      },
      ///////获取分类地区
      getArea(){
          let formData = {};
          getResourceAreas(formData).then(response => {
              if (response.data) {
                    this.areaId = response.data;
              } 
          }, response => {
          });
      },
      ///////获取分类类型
      getType(){
          let formData = {};
          getResourceTypes(formData).then(response => {
              if (response.data) {
                    this.typeId = response.data;
              } 
          }, response => {
          });
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
            //////重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        //////分页
      pageIndexChange(val) {
          this.pageIndex = val;
          this.$store.dispatch('getUserListIndex1', val)
          this.getList();
      },
      pageSizeChange(val) {
      },
      ////////搜索
      onSubmit() {
        this.getList();
      },
      //////获取信息列表
      getList(){
          this.tableloading = true;
          let formData = {
              start : this.pageIndex,
              length : this.pageSize,
              search : this.formInline.name,
              resourceFlag : this.formInline.resourceFlag,
              areaId : this.formInline.areaId,
              typeId : this.formInline.typeId,
              vipFlag : this.formInline.vipFlag,
              shelfState : this.formInline.shelfState
          }
          setTimeout(() => {
              getResourceBaseData(formData).then(response => {
                  if (response.data) {
                      this.tableData = response.data;
                      this.dataTotal = response.recordsTotal;
                      this.tableloading = false;
                  } else {
                  // this.$message.error(response.message);
                  }
              }, response => {
              });
          }, 500);
      },
      /////获取详情
      getResourceBaseDetail(id){
          let formData = {
              resourceId : id,
          }
          getResourceBaseDetail(formData).then(response => {
              if (response.data) {
                  this.ruleForm = response.data;
              } else {
              // this.$message.error(response.message);
              }
          }, response => {
          });
      },
      ///////编辑
      edite(s){
            this.dialogVisible = true
            this.getResourceBaseDetail(s.row.resourceId);
      },
      //////删除
      deleteDetail(s){
          this.$confirm('确定要删除吗?', 'Warning', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(async() => {
              let formData = {
                  resourceId : s.row.resourceId,
              }
              deleteResourceBase(formData).then(response => {
                  if (response.code == '0') {
                      this.getList();
                  } else {
                  }
              }, response => {
              });
              this.$message({
                  type: 'success',
                  message: '删除成功!'
              })
          }).catch(err => { console.error(err) })
      },
      /////编辑提交
      submitForm(formname){  
          this.submitLoad = true;
          let formData = formname;
          resetResourceBase(formData).then(response => {
              if (response.code == 0) {
                  this.dialogVisible = false;
                  this.submitLoad = false;
                  this.$message('修改成功');
              } else {
                this.submitLoad = false;
              // this.$message.error(response.message);
              }
          }, response => {
          });
      },
              beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleexceed(files, fileList){
            const limitPoster = this.limitPoster > 1;
            if (!limitPoster) {
                this.$message.error('最多上传1张');
            }
            return  limitPoster;
        },
        onprogress(event, file, fileList){
            this.ruleForm.poster = file.name;
        },
        handleAvatarError(res, file){
            // console.log(res, file)
        },
        handleAvatarSuccess(res, file) {
            // console.log(res, file)
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        /////////////点击上传图片
        doImgUpload(){
            let that = this;
            that.$refs.upload.submit();
        },
    },
    created(){
       this.getArea();
       this.getType();
    },
    mounted(){
      this.getList();
    }
}
</script>
<style lang="scss" scope>

  .table {
    .block{
        margin: 20px 0;
        float: right;
    }
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    .title{
        font-weight: bold;
        color: #9e9e9e;
        padding: 10px 0;
        margin: 20px 0 40px 0;
        border-bottom: 1px solid #E0E0E0;
    }
  }
</style>>